<template>
  <div class="customer-modal" style="padding: 10px">
    <div v-show="flag" class="add-dbdata">
      <div class="title">{{$t('configLazyLoad.customerConfig.addCustomerDB')}}</div>
      <el-row class="margin-l-30">
        <el-col :span="2" class="text-left" style="padding-top: 5px">
          <span>{{$t('configLazyLoad.customerConfig.customerDBName')}}</span>
        </el-col>
        <el-col :span="9">
          <el-form label-position="top" :model="formData" class="demo-form-stacked" ref="formData" :rules="rules">
            <el-form-item prop="dbName">
          <el-input v-model="formData.dbName" :placeholder="$t('public.pleaseEnter')"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row class="margin-l-30 margin-top-15">
        <el-col :span="2">
          <span>{{$t('configLazyLoad.customerConfig.customerType')}}</span>
        </el-col>
        <el-col :span="9">
          <el-radio class="radio" v-model="custType" label="company">{{$t('configLazyLoad.customerConfig.enterpriseCustomer')}}</el-radio>
          <el-radio class="radio" v-model="custType" label="personal">{{$t('configLazyLoad.customerConfig.personalCustomer')}}</el-radio>
          <div class="content">
            {{$t('configLazyLoad.customerConfig.fieldDesc')}}
          </div>
        </el-col>
      </el-row>
      <el-row class="margin-l-30 margin-top-15">
        <el-col :span="2">
          <span>{{$t('configLazyLoad.customerConfig.businessInfo')}}</span>
        </el-col>
        <el-col :span="9">
          <el-radio class="radio" v-model="callType" label="in">{{$t('configLazyLoad.customerConfig.agentType')}}</el-radio>
          <el-radio class="radio" v-model="callType" label="out">{{$t('configLazyLoad.customerConfig.saleType')}}</el-radio>
          <div class="content" v-html="$t('configLazyLoad.customerConfig.typeDesc')"></div>
        </el-col>
      </el-row>
      <el-row class="margin-l-30 margin-top-15">
        <el-col :span="11" style="text-align: right">
          <el-button type="primary" @click="addCustomerTemplate" class='primary_btn'>{{$t('public.save')}}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row v-show="!flag">
      <el-col :span="24">
        <div class="customer-status customer-box-li">
          <!--客户状态-->
          <div class="title">{{$t('customer.customerSlot.customerStatus')}}</div>
          <div class="content status-content">
            <div v-for="(status, index) in status" :key="index" class="img-div">
              <div class="status-img" :style="status.status === 'enabled'?'background:' + status.color:'background:#ccc'">
                <div style="padding-top: 15px">{{status.imgName}}</div>
              </div>
              <div class="cus-text" :style="status.status === 'enabled'?'color:' + status.color:'color:#ccc'">{{status.name}}</div>
            </div>
            <div class="img-div">
              <div class="edit-img"><i class="iconfont icon-beizhu" @click.stop="editCustomerStatus"></i></div>
              <div class="cus-text" style="margin: auto">{{$t('config.customer.editCustStatus')}}</div>
            </div>
          </div>
        </div>
        <div class="customer-source customer-box-li" style="clear: both">
          <!--数据来源-->
          <div class="title">{{$t('questionnaire.dataSource')}}</div>
          <div class="content">
            <span v-for="(source, index) in customerData.source" :key="index">{{source.name}}<span v-if="index !== (customerData.source.length-1) ">，</span></span>
            <span @click.stop="editCustomerSource" class="edit-btn">{{$t('public.edit')}}</span>
          </div>
        </div>
        <div class="customer-filed customer-box-li">
          <!--客户字段-->
          <div class="title">{{$t('config.customer.customerField')}}</div>
          <div class="content">
            <span v-for="(stable, index) in customerData.stable_fields" :key="index">{{stable.value}}<span v-if="index !== (customerData.stable_fields.length-1) ">，</span></span>
            <span @click.stop="editCustomerField" class="edit-btn">{{$t('public.edit')}}</span>
          </div>
        </div>
        <div class="customer-box-li">
          <div class="title">{{$t('configLazyLoad.customerConfig.infoShow')}}</div>
          <div style="padding-left: 20px;" class="content">
            {{$t('configLazyLoad.customerConfig.infoList')}}
            <span v-if="fieldStr">，{{fieldStr}}</span>
            <span class="edit-field" @click.stop="editShowCustomField" style="margin-left: 15px">{{$t('public.edit')}}</span>
          </div>
        </div>
        <div class="customer-filed customer-box-li">
          <div class="title">{{$t('config.customer.cusDataReap')}}</div>
          <div class="content">
            <!--按客户号码去重-->
            <div><el-checkbox v-model="customerData.unique_phone" @change="uniquePhone">{{$t('config.customer.customerNumberHeavy')}}</el-checkbox><span class="beizhu">{{$t('config.customer.customerNUmHeavyInstr')}}</span></div>
            <div style="padding-top: 5px"><el-checkbox v-model="customerData.unique_name" @change="uniqueName">{{$t('config.customer.customerNameHeavy')}}</el-checkbox><span class="beizhu">{{$t('config.customer.customerNameHeavyInstr')}}</span></div>
          </div>
        </div>
        <div class="customer-filed customer-box-li" v-show="!isEcommerceFlag">
          <div class="title">{{$t('config.customer.callScreen')}}</div>
          <!--来电弹屏自动保存客户-->
          <div class="content">
            <el-checkbox v-model="autoSave" @change="SetAutoSave">{{$t('config.customer.liveScreenSaveCustomers')}}</el-checkbox>
          </div>
        </div>
        <div class="customer-filed customer-box-li" v-show="!isEcommerceFlag">
          <div class="title">{{$t('monitor.offlineLi')}}</div>
          <!--离线接听自动保存客户-->
          <div class="content">
            <el-checkbox v-model="offLineAutoSave" @change="SetOffLineAutoSave">{{$t('config.customer.offlineLiSaveCustomers')}}</el-checkbox>
          </div>
        </div>
        <div class="custom-fields customer-box-li">
          <!--自定义字段-->
          <div class="title">{{$t('config.customer.CustomFields')}}</div>
          <div class="content">
            <draggable :list="filedsDa" :options="{group:'people'}"
                       @start="drag=true" @end="checkMove">
              <div v-for="(item, index) in filedsDa" :key="index" class="fields-div" style="clear: both">
                <div class="filed" :class="item.status === 'stop' ? 'isGreay' : ''">{{item.name}}({{item.type}})</div>
                <div>
                  <span @click.stop="editCustomizeFields(item)" class="edit" v-if="item.status === 'run'">{{$t('public.edit')}}</span>
                  <span @click.stop="openCustomizeFields(item)" v-if="item.status === 'stop'" class="edit">{{$t('config.channel.enabled')}}</span>
                  <span @click.stop="stopCustomizeFields(item)" class="del" v-if="item.status === 'run'">{{$t('config.channel.disabled')}}</span>
                  <span @click.stop="delCustomizeFields(item)" class="del" v-if="item.status === 'stop'">{{$t('public.delete')}}</span>
                </div>
                <div style="clear: both" v-if="item.flag">
                <operate-fields :addTitle="''"
                                :isAdd = "false"
                                :template_id = "customerData._id"
                                :customizeField = "customizeField"
                                @customizeFieldsSuccess="customizeFieldsSuccess"
                                @customizeFields="handleCustomizeField">
                </operate-fields>
                </div>
              </div>
            </draggable>
            <!--添加自定义字段-->
            <div style="clear: both">
              <!--<div @click.stop="editCustomizeFields()" class="add-filed" v-if="!addflag"><span class="add">+</span>{{$t('config.customer.addCustomField')}}</div>-->
              <el-button class="primary_btn" v-if="!addflag" @click.stop="editCustomizeFields()">+ {{$t('config.customer.addCustomField')}}</el-button>
              <operate-fields v-if="addflag"
                              :addTitle="$t('config.customer.addCustomField')"
                              :isAdd = "true"
                              :template_id = "customerData._id"
                              @customizeFieldsSuccess="customizeFieldsSuccess"
                              @customizeFields="handleCustomizeField"></operate-fields>
            </div>
          </div>
        </div>
        <!--===========================客户推送接口 start============================================-->
        <div class="custom-fields customer-box-li" style="clear: both;">
          <div class="title">{{$t('configLazyLoad.customerConfig.pushPort')}}</div>
          <div style="padding: 0px 20px 20px 20px">
            <div style="padding: 10px 20px;" v-if="urls.length === 0">{{$t('configLazyLoad.customerConfig.pleaseAddPort')}}</div>
            <div class="url-item" v-if="urls.length !== 0" v-for="item in urls">
              <span class="urlItem">{{item.url}}</span>
              <span @click.stop="showEditCustUrl(item)" class="edit">{{$t('public.edit')}}</span>
              <span @click.stop="delCustUrl(item)" class="del">{{$t('public.delete')}}</span>
            </div>
            <el-button class="primary_btn" style="margin-top: 20px;" @click="showAddUrl">+ {{$t('configLazyLoad.customerConfig.addPort')}}</el-button>
          </div>
          <div style="padding: 0 20px 40px 20px;" v-if="isShowAddUrlWrap">
            <strong v-if="urlAddOrEditState === 'add'">{{$t('configLazyLoad.customerConfig.addPort')}}</strong>
            <strong v-if="urlAddOrEditState === 'edit'">{{$t('configLazyLoad.customerConfig.editPort')}}</strong><br/>
            <div style="margin: 20px 0;">
              <span style="margin-right: 20px;">{{$t('agentSetting.agentSetting29')}}</span>
              <el-input style="width: 350px;" v-model="urlForm.url"></el-input><br/>
            </div>
            <el-button @click.stop="resetUrlForm" class='primary_btn'>{{$t('public.cancel')}}</el-button>
            <el-button type="primary" @click="saveUrl" class='primary_btn'>{{$t('public.confirm')}}</el-button>
          </div>
        </div>
        <!--===========================客户推送接口  end============================================-->
      </el-col>
    </el-row>
    <el-dialog :close-on-click-modal="false" :title="titleDialog" :visible.sync="dialogVisible">
      <setShowCustomField @setCustomFieldSuc="setCustomFieldSuc" @cannelDial="cannelDial" ref="setShowCustomField" v-if="typeDialog === 'showCustomField'"></setShowCustomField>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="titleDialog" :visible.sync="isOpenCustomSour" class='call-label-dialog customer-source-dialog'>
      <customer-source-dialog :customerSource = "customerData" v-if="isOpenCustomSour" @customSource="handleCustomer"></customer-source-dialog>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="titleDialog" :visible.sync="isOperCustomField" class='customer-filed'>
      <customer-field-dialog :customerField = "customerData" v-if="isOperCustomField" :list="list" @customField="handleField"></customer-field-dialog>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="titleDialog" :visible.sync="isOperCustomStatus" class='customer-status-dialog'>
      <customer-status-dialog :customerStatus1 = "status" :_id="_id" v-if="isOperCustomStatus" @customStatus="handleStatus"></customer-status-dialog>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="titleDialog" :visible.sync="isOpenCustomizeField" class='call-label-dialog' width="50%">
      <customize-fields-Dialog :isAdd = "isAdd" :template_id = "customerData._id" :customizeField = "customizeField" v-if="isOpenCustomizeField" @customizeFields="handleCustomizeField"></customize-fields-Dialog>
    </el-dialog>
  </div>
</template>
<script>
  import setShowCustomField from './setShowCustomField.vue'
  import customerSourceDialog from './customerSourceDialog.vue'
  import CustomerFieldDialog from './CustomerFieldDialog.vue'
  import CustomerStatusDialog from './CustomerStatusDialog.vue'
  import CustomizeFieldsDialog from './CustomizeFieldsDialog.vue'
  import operateFields from './operateFields.vue'
  import { deepClone } from '@/utils/m7Utils.js'
  import { statusCustColorArr } from '@/utils/reportUtils.js'
  import draggable from 'vuedraggable'
  export default {
    name: 'CustomerModal',
    data () {
      return {
        isEcommerceFlag: this.$store.getters.isEcommerce ? true : false,
        typeDialog: '',
        dialogVisible: false,
        autoSave: false,
        offLineAutoSave: false,
        list: [],
        colors: statusCustColorArr,
        perData: [
          {name: 'name', value: '', required: 'required', search: true, noupdate: false},
          {name: 'title', value: '', required: '', search: false, noupdate: false},
          {name: 'phone', value: '', required: '', search: true, noupdate: false},
          {name: 'email', value: '', required: '', search: false, noupdate: false},
          {name: 'weixin', value: '', required: '', search: false, noupdate: false},
          {name: 'province', value: '', required: '', search: true, noupdate: false},
          {name: 'city', value: '', required: '', search: true, noupdate: false},
          {name: 'district', value: '', required: '', search: true, noupdate: false},
          {name: 'address', value: '', required: '', search: false, noupdate: false},
          {name: 'note', value: '', required: '', search: false, noupdate: false},
          {name: 'sex', value: '', required: '', search: false, noupdate: false},
          {name: 'birth', value: '', required: '', search: false, noupdate: false},
          {name: 'age', value: '', required: '', search: false, noupdate: false},
          {name: 'web', value: '', required: '', search: false, noupdate: false},
          {name: 'thirdPartyRelationId', value: '', required: '', search: false, noupdate: false}
        ],
        compData: [
          {name: 'name', value: '', required: 'required', search: true, noupdate: false},
          {name: 'title', value: '', required: '', search: false, noupdate: false},
          {name: 'phone', value: '', required: '', search: true, noupdate: false},
          {name: 'email', value: '', required: '', search: false, noupdate: false},
          {name: 'weixin', value: '', required: '', search: false, noupdate: false},
          {name: 'province', value: '', required: '', search: true, noupdate: false},
          {name: 'city', value: '', required: '', search: true, noupdate: false},
          {name: 'district', value: '', required: '', search: true, noupdate: false},
          {name: 'address', value: '', required: '', search: false, noupdate: false},
          {name: 'note', value: '', required: '', search: false, noupdate: false},
          {name: 'web', value: '', required: '', search: false, noupdate: false},
          {name: 'thirdPartyRelationId', value: '', required: '', search: false, noupdate: false}
        ],
        addTitle: '',
        rules: {
          dbName: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ]
        },
        formData: {
          dbName: ''
        },
        addflag: false,
        custType: 'company',
        callType: 'in',
        flag: false,
        isAdd: false,
        customerData: {},
        currCustomizeField: {},
        customizeField: {},
        titleDialog: '',
        filedsDa: [],
        urls: [],
        urlForm: {
          url: 'http',
          _id: '',
          account: ''
        },
        urlAddOrEditState: 'add',
        isShowAddUrlWrap: false,  //  添加客户推送接口  窗口
        isOpenCustomSour: false,
        isOperCustomField: false,
        isOperCustomStatus: false,
        isOpenCustomizeField: false,
        status: {},
        _id: '',
        fieldStr: '',
        notShowFields: []
      }
    },
    components: {
      setShowCustomField,
      customerSourceDialog,
      CustomerFieldDialog,
      CustomerStatusDialog,
      CustomizeFieldsDialog,
      draggable,
      operateFields
    },
    methods: {
      cannelDial () {
        this.dialogVisible = false
        this.typeDialog = ''
      },
      setCustomFieldSuc (data) {
        this.cannelDial()
        this.handleNotSet(data)
      },
      editShowCustomField () {
        this.dialogVisible = true
        this.titleDialog = this.$t('configLazyLoad.customerConfig.infoShow')
        this.typeDialog = 'showCustomField'
        this.$nextTick(() => {
          this.$refs.setShowCustomField.open(this.showFields, this.notShowFields, this._id)
        })
      },
      stopCustomizeFields (data) {
        this.$confirm(this.$t('configLazyLoad.customerConfig.sureStop'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.handleStatusFields({status: 'stop', field_id: data._id, template_id: this.customerData._id}, '停用成功')
        })
      },
      handleStatusFields (data, tip) {
        this.$store.dispatch('changeCustomerFieldStatus', data).then(resp => {
          if (resp.success) {
            this.$message.success(tip)
            this.filedsDa = []
            if (resp.data.length !== 0) {
              resp.data.forEach(item => {
                let obj = {
                  status: item.status,
                  saveLog: item.saveLog,
                  choices: item.choices,
                  noupdate: item.noupdate,
                  required: item.required,
                  type: item.type,
                  _id: item._id,
                  name: item.name,
                  flag: false
                }
                if (item.dic) {
                  obj.dic = item.dic
                  obj.mustFill = item.mustFill
                }
                this.filedsDa.push(deepClone(obj))
              })
            }
            this.handleNotSet()
          } else {
            this.$message.error(this.$t('sms.failDel'))
          }
        })
      },
      openCustomizeFields (data) {
        this.handleStatusFields({status: 'run', field_id: data._id, template_id: this.customerData._id}, this.$t('sms.reuseSuccess'))
      },
//      拖拽自定义字段
      checkMove (event) {
        let data = {
          template_id: this.customerData._id,
          _id: this.filedsDa[event.newIndex]._id,
          newIndex: event.newIndex,
          oldIndex: event.oldIndex
        }
        this.$store.dispatch('moveCustomFieldByIndex', data).then(resp => {
          if (!resp.success) {
            this.filedsDa = []
            this.customerData.custom_fields.forEach(item => {
              let obj = {
                status: item.status,
                saveLog: item.saveLog,
                choices: item.choices,
                noupdate: item.noupdate,
                required: item.required,
                type: item.type,
                _id: item._id,
                name: item.name,
                flag: false
              }
              if (item.dic) {
                obj.dic = item.dic
                obj.mustFill = item.mustFill
              }
              this.filedsDa.push(deepClone(obj))
            })
            this.$message.error(resp.message)
          }
        })
      },
//      新开账号添加数据库
      addCustomerTemplate () {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            let data = {
              account: this.$store.state.session.user.account,
              callType: this.callType,
              name: this.formData.dbName,
              type: this.custType
            }
            console.log(data)
            this.$store.dispatch('addCustomerTemplate', data).then(resp => {
              if (resp.success) {
                this.$message.success(this.$t('config.customer.addSucc'))
                this.fetchData()
              }
            })
          }
        })
      },
//      添加自定义字段成功
      customizeFieldsSuccess (data) {
        delete data.data.template_id
        console.log(this.filedsDa)
        if (data.isAdd) {
          this.addflag = false
          this.filedsDa.unshift(data.data)
        } else {
          this.filedsDa.forEach((item, index) => {
            if (item._id === data.data._id) {
//              this.filedsDa[index] = data.data
              this.filedsDa.splice(index, 1, data.data)
            }
          })
          this.handleNotSet()
        }
      },
      handleNotSet (data) {
        if (data) {
          this.showFields = data
        }
        let _arr = this.customerData.stable_fields.concat(this.filedsDa)
        this.notShowFields = [
          {
            id: 'provinceCD',
            value: this.$t('configLazyLoad.customerConfig.threeLevelAddress'),
            status: false
          }
        ]
        this.fieldStr = ''
        for (let i = 0; i < _arr.length; i++) {
          // 如果有type说明是自定义字段
          if (_arr[i].type) {
            if (_arr[i]._id === this.showFields) {
              this.fieldStr = _arr[i].name
            }
            if (_arr[i].status === 'stop') {
              _arr[i].name && this.notShowFields.push({id: _arr[i]._id, value: _arr[i].name, status: true})
            } else {
              _arr[i].name && this.notShowFields.push({id: _arr[i]._id, value: _arr[i].name, status: false})
            }
          } else {
            // 固定字段
            if (_arr[i].name === this.showFields) {
              if (_arr[i].value) {
                this.fieldStr = _arr[i].value
              }
            }
            if (_arr[i].name !== 'title' && _arr[i].name !== 'district' && _arr[i].name !== 'city' && _arr[i].name !== 'province') {
              _arr[i].value && this.notShowFields.push({id: _arr[i].name, value: _arr[i].value, status: false})
            }
          }
        }
        if (this.showFields === 'provinceCD') {
          this.fieldStr = this.$t('configLazyLoad.customerConfig.threeLevelAddress')
        } else {
          if (!this.notShowFields.find(v => v.id === this.showFields)) {
            console.log('you')
            this.showFields = ''
            this.fieldStr = ''
          }
        }
      },
//      初始化数据
      fetchData () {
        this.filedsDa = []
        let data = {
          account: this.$store.state.session.user.account
        }
        let p1 = this.$store.dispatch('getCustomerTemplate', data)
        let p2 = this.$store.dispatch('queryCompanyConfig', null)
        Promise.all([p1, p2]).then(([resp, urls]) => {
          if (resp.data.length === 0) {
            this.flag = true
          } else {
            this.flag = false
            this.customerData = resp.data[0]
            this.showFields = resp.data[0].displayFields || ''
            let _status = deepClone(this.customerData.status)
            let _statusConf = {}
            if (this.customerData.statusConfig) {
              _statusConf = this.customerData.statusConfig
            } else {
              this.statusConfig = {}
            }
            for (let key in _status) {
              if (_status[key] !== '') {
                let _imgName = _status[key]
                if (_status[key].length > 1) {
                  _imgName = _status[key].substring(0, 2).toUpperCase()
                } else {
                  _imgName = _status[key].toUpperCase()
                }
                if (_statusConf[key]) {
                  if (_statusConf[key].status === 'disabled') {
                    this.$set(this.status, key, {name: _status[key], color: _statusConf[key].color, status: _statusConf[key].status, flag: false, imgName: this.$t('config.channel.disabled')})
                  } else {
                    this.$set(this.status, key, {name: _status[key], color: _statusConf[key].color, status: _statusConf[key].status, flag: false, imgName: _imgName})
                  }
                } else {
                  this.$set(this.status, key, {name: _status[key], color: this.colors[key], status: 'enabled', flag: false, imgName: _imgName})
                }
              } else {
                this.$set(this.status, key, {name: '', color: this.colors[key], status: 'disabled', flag: false, imgName: this.$t('config.channel.disabled')})
              }
            }
            this.customerData.custom_fields.forEach(item => {
              let obj = {
                status: item.status || 'run',
                saveLog: item.saveLog || false,
                choices: item.choices,
                noupdate: item.noupdate || false,
                required: item.required,
                type: item.type,
                _id: item._id,
                name: item.name,
                flag: false
              }
              this.notShowFields.push({id: item._id, value: item.name})
              if (item.dic) {
                obj.dic = item.dic
                obj.mustFill = item.mustFill
              }
              this.filedsDa.push(deepClone(obj))
            })
            this.handleNotSet()
          }
          this._id = this.customerData._id
          this.urls = urls.data
        })
      },
//      取消处理
      handleCustomizeField (data) {
        if (data.isAdd) {
          this.addflag = false
        } else {
          this.customizeField.flag = false
        }
      },
//      添加编辑自定义字段
      editCustomizeFields (data) {
        this.currCustomizeField = data
        if (data) {
          this.filedsDa.forEach((item, index) => {
            this.filedsDa[index].flag = false
          })
          data.flag = true
          this.customizeField = data
        } else {
          this.addflag = true
        }
      },
//      删除自定义字段
      delCustomizeFields (data) {
        this.$confirm(this.$t('configLazyLoad.customerConfig.tip6'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteCustomField', {field_id: data._id, template_id: this.customerData._id}).then(resp => {
            if (resp.success) {
              this.$message.success(this.$t('sms.successDel'))
              for (let i = 0; i < this.filedsDa.length; i++) {
                if (data._id === this.filedsDa[i]._id) {
                  this.filedsDa.splice(i, 1)
                }
              }
              this.handleNotSet()
            } else {
              this.$message.error(this.$t('sms.failDel'))
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      },
//      编辑客户状态
      editCustomerStatus () {
        this.titleDialog = this.$t('config.customer.makeCustomerStatus')
        this.isOperCustomStatus = true
      },
//      编辑客户字段
      editCustomerField () {
        console.log(this.customerData)
        if (this.customerData.template_type === 'company') {
          this.list = this.compData
        } else if (this.customerData.template_type === 'personal') {
          this.list = this.perData
        }
        this.titleDialog = this.$t('config.customer.makeCustomerField')
        this.isOperCustomField = true
      },
      handleStatus1 (data) {
        console.log(data)
        console.log(this.customerData.status)
        this.isOperCustomStatus = false
      },
//      保存客户状态
      handleStatus (data) {
        this.status = {}
        this.status = data.status
        this.isOperCustomStatus = data.flag
      },
//      保存数据来源
      handleCustomer (data) {
        this.customerData.source = data.source
        this.isOpenCustomSour = data.flag
      },
      handleField (data) {
        this.customerData.stable_fields = data.fields
        this.isOperCustomField = data.flag
        this.handleNotSet()
      },
      saveCustomFiled () {
        this.isOperCustomField = false
      },
      OperCustomField (data) {
        this.isOperCustomField = true
        if (data) {
          this.titleDialog = this.$t('config.customer.editCustomField')
//          this.formdata = data
        } else {
          this.titleDialog = this.$t('config.customer.addCustomField')
//          let formdata = {
//            name: '',
//            require: 'require',
//            noupdate: 'true',
//            type: 'single',
//            choices: ['']
//          }
//          this.formdata = formdata
        }
      },
      editCustomerSource () {
        this.titleDialog = this.$t('config.customer.makeCustomSour')
        this.isOpenCustomSour = true
      },
//      按客户号码去重
      uniquePhone () {
        let data = {
          id: this.customerData._id,
          unique: this.customerData.unique_phone,
          field: 'unique_phone'
        }
        this.$store.dispatch('uniqueField', data).then(resp => {
          if (resp && resp.success) {
            this.customerData.unique_phone = this.customerData.unique_phone
          } else {
            this.customerData.unique_phone = !this.customerData.unique_phone
          }
        })
      },
//      按客户名称去重
      uniqueName () {
        let data = {
          id: this.customerData._id,
          unique: this.customerData.unique_name,
          field: 'unique_name'
        }
        this.$store.dispatch('uniqueField', data).then(resp => {
          if (resp && resp.success) {
            this.customerData.unique_name = this.customerData.unique_name
          } else {
            this.customerData.unique_name = !this.customerData.unique_name
          }
        })
      },
//      来电弹屏
      SetAutoSave () {
        this.$store.dispatch('setAutoSave', {autoSave: this.autoSave}).then(resp => {
          if (resp && resp.success) {
            this.autoSave = this.autoSave
          } else {
            this.autoSave = !this.autoSave
          }
        })
      },
//      离线保存
      SetOffLineAutoSave () {
        this.$store.dispatch('customerSetAutoSave', {offLineAutoSave: this.offLineAutoSave}).then(resp => {
          if (resp && resp.success) {
            this.offLineAutoSave = this.offLineAutoSave
          } else {
            this.offLineAutoSave = !this.offLineAutoSave
          }
        })
      },
//     客户推送 接口
      resetUrlForm () {
        this.isShowAddUrlWrap = false
        this.urlForm.url = 'http'
      },
      searchUrls () {
        this.$store.dispatch('queryCompanyConfig', null).then(res => {
          if (res.success) {
            this.urls = res.data
          }
        })
      },
      saveUrl () {
        let data = {}
        data.url = this.urlForm.url
        let urlStr = this.urlForm.url.substring(0, 5)
        if (!(urlStr === 'http:' || urlStr === 'https')) {
          this.$message.error(this.$t('agentSetting.agentSetting30'))
          return
        }
        if (this.urlAddOrEditState === 'add') {
          this.$store.dispatch('addCompanyConfig', data).then(res => {
            if (res.success) {
              this.searchUrls()
              this.resetUrlForm()
            }
          })
        } else {
          data._id = this.urlForm._id
          data.account = this.urlForm.account
          this.$store.dispatch('updateCompanyConfig', data).then(res => {
            if (res.success) {
              this.searchUrls()
              this.resetUrlForm()
            }
          })
        }
      },
      delCustUrl (item) {
        this.isShowAddUrlWrap = false
        let data = {}
        data._id = item._id
        data.account = this.$store.state.session.user.account
        this.$confirm(this.$t('agentSetting.agentSetting56'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('removeCompanyConfig', data).then(resp => {
            if (resp.success) {
              this.$message.success(this.$t('sms.successDel'))
              this.searchUrls()
            } else {
              this.$message.error(this.$t('sms.failDel'))
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      },
      showAddUrl () {
        this.urlAddOrEditState = 'add'
        this.isShowAddUrlWrap = true
        this.urlForm.url = 'http'
      },
      showEditCustUrl (item) {
        this.urlAddOrEditState = 'edit'
        this.isShowAddUrlWrap = true
        this.urlForm.url = item.url
        this.urlForm._id = item._id
        this.urlForm.account = item.account
      }
    },
    beforeMount () {
      this.fetchData()
      console.log(this.$store.state.session,'account')
      this.autoSave = this.$store.state.session.account.autoSave
      this.offLineAutoSave = this.$store.state.session.account.offLineAutoSave
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .customer-modal
    height: calc(100vh - 162px)
    overflow-y: auto
    .check-radio
      margin-left 15px
      margin-top 10px
    .title
      font-size 14px
      font-weight 500
      padding 10px
      padding-bottom 0px
      font-weight bold
      margin-bottom 10px
    .content
      padding-left 20px
      color $cf-gray3
    .edit-btn
      color $c-main
      margin-left 25px
      cursor pointer
    .custom-fields
      .url-item
        padding 6px 0
        .urlItem
          display inline-block
          width 410px
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
        .edit
          color $c-main
          padding-right 20px
          cursor pointer
        .del
          color $c-pink
          cursor pointer
      .fields-div:before
        color $cf-gray4
        float: left
        content: " "
        width: 3px
        height: 17px
        border: 1px dotted #a6a6a6
        margin-right: 5px
        border-top: none
        border-bottom: none
      .fields-div
        padding-bottom 14px
        cursor move
        .filed
          float left
          padding 2px 0px
          width 400px
          color $cf-gray1
        .edit
          color $c-main
          padding-right 20px
          cursor pointer
        .del
          color $c-pink
          cursor pointer
      .add-filed
        border 1px solid $c-main
        color $c-main
        padding 3px 10px
        width 100px
        margin-top 10px
        border-radius 4px
        cursor pointer
        clear both
        .add
          font-size 16px
          padding-right 3px
    .customer-filed
      .beizhu
        color $cf-gray4
    .customer-status
      .status-content
        .cus-text
          padding-top 5px
          color $c-main
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        .edit-img
          padding: 10px;
          font-size: 20px;
          margin-top: 10px;
          margin-bottom: 5px;
          padding-left: 5px;
        .icon-beizhu
          color $c-main
          border: 1px solid $c-main
          padding: 18px
          border-radius: 50%
          cursor pointer
        .img-div
          text-align: center
          float: left
          margin-right: 15px
          margin-bottom 10px
          position relative
          height 76px
          width 76px
        .status-img
          border-radius: 50%
          background #fff
          font-family "iconfont" !important
          font-style normal
          -webkit-font-smoothing antialiased
          font-size 20px
          color #fff
          height 54px
          width 54px
          border: 3px solid #fff
          margin auto
    .text-left
       text-align left
    .margin-l-30
       margin-left  30px
    .margin-top-15
       margin-top 15px
    .add-dbdata
      color $cf-gray1
      .title
        font-size: 14px
        font-weight: 500
        padding: 15px
      .content
        padding-top 5px
        color $cf-gray4
.isGreay
  color #ccc
.edit-field
  cursor pointer
  color $c-main
  .icon-beizhu
    padding-right 5px
.customer-box-li
  margin-bottom 10px
</style>
